<template>
  <view class="dialog-background" v-if="show" @click="clickFunc1">
    <view class="inner-box">
      <view class="content" @click.stop="clickFunc2">
        <view class="header">MBTI测试须知</view>
        <view class="data-box" v-if="type === 1">
          <view class="explain">1、本问卷中的所有问题{{number}}题都来源于我们的日常生活，而你的选择只是表明你通常是如何看待和处理事务的。所有问题都是反映何种工作氛围和环境适合你，无所谓对错，更无好坏之分。</view>
          <view class="explain">2、请遵循自己的第一主观意识去选择，无需过多纠结，自己独立回答问题，这样才能得到较为有效的结果。</view>
          <view class="explain" v-if="number == 28">3、本测试题一共28题，大约耗时5分钟。</view>
          <view class="explain" v-else>3、本测试题一共93题，大约耗时15分钟。</view>
        </view>
<!--        <view class="data-box" v-if="type === 2">-->
<!--          <view class="explain" style="text-align: center;">观看广告即可继续测试</view>-->
<!--        </view>-->
        <view class="start-btn" v-if="type === 1">开始</view>
        <view class="start-btn" v-if="type === 2">确定</view>

<!--        <view class="data-box" v-if="number != 28" style="padding: 20rpx 48rpx 0rpx 48rpx;">-->
<!--          <view class="explain" style="text-align: center;">- 观看广告即可继续测试 -</view>-->
<!--        </view>-->

      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'TipsMessageDialog',
    props:["show","btnIndex","type"],
    data() {
      return {
        number: 28,
        systemObj: {}
      }
    },
    onLoad() {

    },

    created () {
      this.systemObj = this.$store.state.systemObj
    },
    methods: {
      clickFunc1() {
        this.$emit('update:show', false)
        this.$emit('close')
      },
      clickFunc2() {
        this.$emit('startAnswer',this.btnIndex)
      }
    },
    watch: {
      show(val) {
        if(val) {
          this.number = this.btnIndex != 2 ? 28 : 93
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.dialog-background {
  position: absolute;
  top: 0rpx;
  left: 0rpx;
  right: 0rpx;
  bottom: 0rpx;
  background: rgba(0,0,0,.6);

  .inner-box {
    position: relative;
    width: 100%;
    height: 100%;

    .content {
      position: absolute;
      left: 50%;
      padding-bottom: 30rpx;
      margin-left: -340rpx;
      width: 680rpx;
      background:rgba(255,255,255,1);
      border-radius: 16rpx;
      animation: contentAnimate 0.3s ease forwards;

      .header {
        width: 100%;
        height: 100rpx;
        background:linear-gradient(270deg,rgba(33,139,215,1) 0%,rgba(125,197,243,1) 100%);
        border-radius:16rpx 16rpx 0rpx 0rpx;
        font-size:34rpx;
        color: #fff;
        line-height: 100rpx;
        text-align: center;
      }

      .data-box {
        padding: 40rpx 48rpx 42rpx 48rpx;

        .explain {
          padding-bottom: 32rpx;
          font-size:26rpx;
          color:rgba(97,97,97,1);
          line-height:38rpx;
        }

        .explain:last-child {
          padding-bottom: 0rpx;
        }
      }

      .start-btn {
        width:250rpx;
        height:88rpx;
        margin: 0 auto;
        background:linear-gradient(270deg,rgba(33,139,215,1) 0%,rgba(125,197,243,1) 100%);
        border-radius:10rpx;
        font-size:32rpx;
        color:rgba(255,255,255,1);
        text-align: center;
        line-height: 88rpx;
      }
    }

    @keyframes contentAnimate
    {
      0%   {
        top: 0rpx;
        opacity: 0;
      }
      100% {
        top: 50%;
        margin-top: -345rpx;
        opacity: 1;
      }
    }
  }
}
</style>
